<template>
	<view class="content">
		<mescroll-body ref="mescrollRef"  @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="header-box">
		</view>
		<view class="price-box">
			<view class="money-title">石榴趣购，拼手气领补贴</view>
			<view class="money">{{result.subsidy.price}}<text style="font-size: 36upx;">元</text></view>
			<view class="moeny-tips">{{result.subsidy.status === 1? '已存入账户余额，随时可提现': '拼团失败，已退回'}}</view>
		</view>
		
		<view class="goods-info">
			<view class="goods-image">
				<image :src="result.goods.image" style="width: 127upx; height: 137upx;"></image>
				<view v-if="result.team.team_state === 2">未拼中</view>
				<view v-if="result.team.team_state === 3">拼团失败</view>
				<view v-if="result.team.team_state === 4" style="background-color: rgba(255,94,37, 0.43);">已拼中</view>
			</view>
			<view class="goods-detail">
				<view class="detail-name">{{result.goods.title}} </view>
				<view class="footer-name" v-show="result.team.team_state === 1 || result.team.team_state === 0">拼团中</view>
				<view class="footer-name" v-show="result.team.team_state === 2">已结束，没有拼中</view>
				<view class="footer-name" v-show="result.team.team_state === 3">已自动退款￥{{result.team.total_price}}至余额</view>
				<view class="footer-name" v-show="result.team.team_state === 4">恭喜你拼中大奖！可在“我的奖品”查看</view>
			</view>
		</view>
		
		<view class="time">
			<block v-if="result.team.team_state === 1 || result.team.team_state === 0">
				<view class="left-time">{{result.sub_total}}人已领取补贴，还差{{result.zptusernum - result.sub_total}}人成团</view>
				<view class="right-time">
					<view>{{day}}天</view><text>:</text>
					<view>{{hours}}</view><text>:</text>
					<view>{{minute}}</view><text>:</text>
					<view>{{second}}</view>
				</view>
			</block>
			<block v-else-if="result.team.team_state !== 1 && result.team.team_state !== 0">
				<view class="left-time" v-show="result.team.team_state === 2">拼团成功！ </view>
				<view class="left-time" v-show="result.team.team_state === 3">已退款 </view>
				<view class="left-time" v-show="result.team.team_state === 4">已拼中 </view>
				<view class="right-time">
				</view>
			</block>
		</view>
		
		<view class="list-box">
			<view class="item-box" v-for="(item, index) in result.subsidylist" :key="index">
				<view class="left-box">
					<image :src="item.user.avatar" style="width: 84upx; height: 84upx; border-radius: 50%;"></image>
					<view class="list-detail">
						<view class="name" style="display: flex; align-items: center; ">{{item.user.nickname}} <view style="width: 82upx;
height: 44upx;
background: linear-gradient(148deg, #EB1B01, #FB3E28);
border-radius: 22upx; font-size: 25upx; color: #FFFFFF; text-align: center; margin-left: 26upx; line-height: 44upx;" v-show="item.sub_state === 1">拼中</view></view>
						<view class="detail-time">参与时间：{{item.created_at}}</view>
					</view>
				</view>

				<view v-show="(result.team.team_state == 1 || result.team.team_state == 0) && item.is_status == 1" class="right-box">
					{{ item.uid === userInfo.uid ? item.price + '元' : '成团后公布'}}
				</view>
				<view v-show="result.team.team_state !== 1 && result.team.team_state !== 0 && item.is_status == 1" class="right-box">
					{{ item.price + '元'}}
				</view>
				<view  v-show="item.is_status != 1" class="right-box" style="color: #989898;">
					补贴已退回
				</view>
				
			</view>
		</view>
		
		
		<!-- 提示已退款 -->
		<u-mask :show="tixinFlage == 3" @click="tixinFlage = 0">
			<view class="tixinwarp">
				<view class="tixinrect" @tap.stop>
					<view class="title-image">
						<image src="../../../static/images/index/tixin.png" style="width: 218upx; height: 217upx;">
						</image>
					</view>
					<view class="tips">
						<view class="line left-line"></view>
						<view class="title">温馨提示</view>
						<view class="line right-line"></view>
					</view>
					<view class="tishi-content">
						你未拼中奖品，款项已原路退回
					</view>
					<view class="cancel-btn" @click="tixinFlage = 0">我知道了</view>
				</view>
			</view>
		</u-mask>
	
	
		<!-- 没有中奖 -->
		<u-mask :show="is_zj == 2 && tixinFlage != 3" @click="is_zj = 0">
			<view class="tixinwarp">
				<view class="tixinrect" @tap.stop>
					<view class="title-image">
						<!-- <image src="../../../static/images/index/tixin2.png" style="width: 218upx; height: 217upx;">
						</image> -->
					</view>
					<view class="tips">
						<view class="line left-line"></view>
						<view class="title">未中奖</view>
						<view class="line right-line"></view>
					</view>
					<view class="tishi-content">
						系统已自动退款
					</view>
					<view class="cancel-btn" @click="is_zj = 0">去看看</view>
				</view>
			</view>
		</u-mask>
		
		<!-- 已经中奖 -->
		<u-mask :show="is_zj == 1 && tixinFlage != 3" @click="is_zj = 0">
			<view class="tixinwarp">
				<view class="tixinrect" @tap.stop>
					<view class="title-image">
						<image src="../../../static/images/index/tixin.png" style="width: 218upx; height: 217upx;">
						</image>
					</view>
					<view class="tips">
						<view class="line left-line"></view>
						<view class="title">恭喜您~</view>
						<view class="line right-line"></view>
					</view>
					<view class="tishi-content">
						拼中商品
					</view>
					<view class="cancel-btn" @click="is_zj = 0">去看看</view>
				</view>
			</view>
		</u-mask>
		
		</mescroll-body>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState } from 'vuex';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	let timer;
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				result: {},
				tixinMaskshow: true, // 提醒遮罩层
				day: 0,
				hours: 0,
				minute: 0,
				second: 0,
				tixinFlage: 0,
				is_zj: 0, // 是否中奖
			}
		},
		async onLoad(){
			
		},
		filter: {
			
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(page) {
				this.getSubsidydetail();
				this.mescroll.endBySize(1, 0); 
			},
			getSubsidydetail() {
					this.$http.get('index.subsidydetail', {
					team_id: this.$Route.query.id,
					team_member_id: this.$Route.query.teammemberid,
				}).then(res => {
					// this.num = res.data.subsidy && res.data.subsidy.price
					this.result = res.data;
					this.is_zj = res.data.is_zj;
					this.tixinFlage = this.result.team.team_state;
					 this.countDown(this.result.end_time);
				})
			
			},
			countDown(endTimeStamp) {
			    var nowTimeStamp = new Date().getTime();
			    var time = {}
				endTimeStamp = endTimeStamp * 1000;
				var mss = endTimeStamp - nowTimeStamp;
				timer = setInterval(() => {
					if (endTimeStamp > nowTimeStamp) {
					  mss =  mss - 1000;
					  var days = parseInt(mss / (1000 * 60 * 60 * 24))
					  var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
					  var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60))
					  var seconds = parseInt((mss % (1000 * 60)) / 1000)
					 this.day = days < 10 ? "0" + days : days;
					 this.hour = hours < 10 ? "0" + hours : hours;
					 this.minute = minutes < 10 ? "0" + minutes : minutes;
					 this.second = seconds < 10 ? "0" + seconds : seconds;
					} else {
					  this.day = '00',
					  this.hour = '00',
					  this.minute = '00',
					  this.second = '00',
					  clearInterval(timer);
					}
				}, 1000);
			  },
		},
		onShow(){
			
		},
		onHide() {
			clearInterval(timer);
			timer = null;
		},
		// #ifdef MP-WEIXIN
		// 分享好友
		onShareAppMessage(res) {
			let shareInfo = {};
			shareInfo.path = `/pages/index/goods-detail/goods-detail?id=${this.$Route.query.id}&mid=${this.userInfo.uid}`;
			shareInfo.image =this.result.goods.image;
			shareInfo.title = `和我一起拼团，领商家补贴`;
			return {
				title: shareInfo.title,
				path: shareInfo.path,
				imageUrl: shareInfo.image,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				},
				complete() {}
			}
		},
			
		// #endif
	}
</script>

<style scoped lang="scss">
	@import './collage-detail.scss';
</style>


<style scoped lang="scss">
	.tixinwarp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}
	
	.tixinrect {
		width: 530upx;
		height: 450upx;
		background: #FFFFFF;
		border-radius: 10upx;
		.title-image{
			width: 217upx;
			height: 217upx;
			margin: 0 auto;
			margin-top: -110upx;
		}
		.tips{
			display: flex;
			align-content: center;
			justify-content: space-between;
			margin-top: 5upx;
			padding: 0 50upx;
			.line{
				width: 123upx;
				height: 1upx;
				background: #E5E5E5;
				margin-top: 17upx;
			}
			.title{
				font-size: 26upx;
				color: #000000;
				font-weight: bold;
			}
		}
		.tishi-content{
			font-size: 24upx;
			color: #6E6D6D;
			padding: 0 60upx;
			margin-top: 50upx;
			text-align: center;
		}
		.cancel-btn{
			width: 461upx;
			height: 65upx;
			background: #FF6027;
			border-radius: 33upx;
			text-align: center;
			line-height: 65upx;
			color: #FFFFFF;
			font-size: 28upx;
			margin: 0 auto;
			margin-top: 50upx;
		}
	}
</style>
